import { View, Image } from '@tarojs/components'
import { CellGroup ,Dialog } from '@antmjs/vantui'
import { useState , useEffect } from 'react'
import Taro from '@tarojs/taro'
import WowSelect from '../../components/WowSelect'
import WowSelectRole from '../../components/WowSelectRole'
import './index.less'


const TaskPublish = () => {

  const [floor] = useState([
    {
      name: '2-14层',
      value: 0
    },
    {
      name: '15-19层',
      value: 1
    },
    {
      name: '20以上',
      value: 2
    }
  ])
  const [hasKey] = useState([
    {
      name: '有',
      value: 0
    },
    {
      name: '无',
      value: 1
    }
  ])
  const [role] = useState([
    {
      name: '坦克',
      value: 'T'
    },
    {
      name: '治疗',
      value: 'N'
    },
    {
      name: '输出',
      value: 'DPS'
    }
  ])
  const [params, setParams] = useState({
    taskDetail: 0,
    keyStatus: 0,
    user1: '',
    function1: ''
  })
  const [roleList, setRoleList] = useState([])
  const [showDialog, setShowDialog] = useState(true)
  const [publishRes, setPublishRes] = useState({})

  const getRoles = async () => {
    const { data: res } = await Taro.$http.post('/api/gy/getGameUsers')
    if(res.code !== 0) return Taro.$showMsg()
    setRoleList(res.data.map(e => e.name))
    console.log(res.data)
  }

  const setParamsData = (key, item)=> {
    setParams({
      ...params,
      [key]: item.value
    })
  }

  useEffect(() => {
    getRoles()
  }, [])

  const publishTask = async () => {
    setShowDialog(true)
    const { data: res } = await Taro.$http.post('/api/gy/createRoom', params)
    if(res.code !== 0) return Taro.$showMsg()
    setPublishRes(res)
    // Taro.switchTab({
    //   url: '/pages/task/index',
    //   success: () => {
    //     Taro.$showMsg('发布任务成功!')
    //   }
    // })
  }

  return (
    <View>
      <View className='header'>
        <View className='header-bg' />
        <View className='logo' />
      </View>
      <WowSelectRole onConfirm={val => setParamsData('user1', val)} list={roleList} />
      <CellGroup inset>
        <WowSelect onConfirm={item => setParamsData('keyStatus',item)} current={1} placeholder='请选择大秘境层数' cols={floor} />
        <WowSelect onConfirm={item => setParamsData('taskDetail',item)} placeholder='有无钥匙' cols={hasKey} />
        <WowSelect onConfirm={item => setParamsData('function1',item)} placeholder='选择职责' cols={role} />
      </CellGroup>
      <View className='btn-box' onClick={publishTask}>
        <View className='pub-task-btn'>
          <View className='front-bg'>发布任务</View>
        </View>
      </View>

      <Dialog show={showDialog}>
        <View className='dialog-box'>
          <Image 
            className='state-img' 
            src={require(`../../static/images/dialog-${publishRes.code === 0 ? 'success' : 'fail'}.png`)} 
          />
          <View className='state-title'>房间申请{publishRes.code === 0 ? '成功' : '失败'}</View>
          <View className='state-text'>当前选择秘境{floor[params.keyStatus].name}</View>
        </View>
      </Dialog>
    </View>
  )
}

export default TaskPublish